<template>
<el-button :size="size" :class="[`im-${type}`, 'im-button']"
           :style="{width: width}" @click="handleBtnClick">
  <i v-if="leftIcon" :class="[leftIcon]"></i>&nbsp;{{text}}&nbsp;<i v-if="rightIcon" :class="[rightIcon]"></i>
</el-button>
</template>

<script>
export default {
  name: "index",
  data() {
    return {}
  },
  props: {
    text: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: 'default'
    },
    width: {
      type: String,
      default: 'auto'
    },
    rightIcon: {
      type: String,
      default: ''
    },
    leftIcon: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleBtnClick() {
      this.$emit('on-click')
    }
  }
}
</script>

<style lang="scss">
button.im-default{
  color: #222;
  border-color: #ddd;
}
button.im-default:focus{
  color: #222;
  background: #fff;
  border-color: #ddd;
}
button.im-default:hover{
  color: #222;
  background: #eee;
  border-color: #ddd;
}
button.im-default:active{
  border-color: #ddd;
  color: #222;
  background: #f5f5f5;
}
button.im-primary{
  color: #222;
  border-color: #FFEB00;
  background: #FFEB00;
}
button.im-primary:focus{
  color: #222;
  background: #FFEB00;
  border-color: #FFEB00;
}
button.im-primary:hover{
  color: #222;
  background: #FCC32C;
  border-color: #FCC32C;
}
button.im-primary:active{
  border-color: #FFEB00;
  color: #222;
  background: #FFEB00;
}
button{
   i.icon-add{
    display: inline-block;
    width: 14px;
    height: 13px;
     vertical-align: middle;
    background: url("../../assets/img/icon-add.png") no-repeat;
  }
}
</style>
